<template>
  <!--
   <el-table  element-ui给我们提供的表格组件
   :data  绑定模型层的数据
   border 边框
   stripe  斑马条纹
  -->
  <el-table
    :data="tableData"
    border
    stripe
    style="width: 100%">
    <!--
      <el-table-column 一列
      prop="date" 绑定模型层tableData中对象的属性
      label   列头
      width  列宽  保留一列不要写宽度，让它撑满窗口
    -->
    <el-table-column
      prop="birthday"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
/* 导入mockjs  */
import UserMock from "../../mock/user.js";
/*局部引入axios使用*/
import axios from "axios"
export default {
  name: 'User',
  data () {// 组件内部取值
    return {
      tableData:[] //进入页面之后，初始化数据应该是空的
    }
  },
  mounted() {
    //在这里异步加载数据
    //数据的加载时机已经发生了彻底的改变  同步---异步
    //最标准的做法，应该在这里发送axios请求从后台拿数据
    axios.post("/user/list",{"currentPage":1,"pageSize":10})
      .then(result=>{//调用后端成功后之后的返回
        result = result.data;// PageList  {total:43,rows:[]}
        this.tableData = result.rows;
      })
      .catch(result=>{//调用不通后端
        this.$message({
          type: 'error',
          message: "系统繁忙，稍后重试！！"
        });
      })

  }
}
</script>

<style scoped>
</style>
